<template>
	<view>
		<navbar title="选择审批" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="con__box">
					<view class="con__box__item" v-for="(item,index) in list" :key="index" @click="navto('/pages/approval/leave?title='+item.name+'&type='+item.url)">
						<image :src="'/static/approval/'+item.icon+'.png'" class="con__box__item__icon" mode=""></image>
						<view style="flex: 1;" class="">
							<view class="con__box__item__name">
								{{item.name}}
							</view>
							<view class="con__box__item__text">
								{{item.text}}
							</view>
						</view>
						<image src="/static/approval/more.png" class="con__box__item__m" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					// 类型:1=请假,2=外出,3=加班,4=申请
					{name:'请假',icon:'qj',text:'一个请假、调休申请',url:'1'},
					{name:'外出',icon:'wc',text:'一个外出、出差申请',url:'2'},
					{name:'加班',icon:'jb',text:'一个加班申请',url:'3'},
					{name:'其他',icon:'qt',text:'其他事项的审批申请',url:'4'},
				]
			};
		},
		onLoad(o) {
			this.status=o.status
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.scbox{
		height: calc(100vh - var(--status-bar-height) - 44px);
	}
	.con {
		padding: 20rpx 30rpx;
		&__box{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 6rpx 0 2rpx 30rpx;
			&__item{
				padding: 37rpx 28rpx 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F4F6F8;
				&__icon{
					width: 109rpx;
					height: 109rpx;
					margin-right: 16rpx;
				}
				&__name{
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 30rpx;
					color: #333333;
					line-height: 30rpx;
				}
				&__text{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #7F7E7E;
					line-height: 24rpx;
					margin-top: 18rpx;
				}
				&__m{
					width: 12rpx;
					height: 22rpx;
				}
			}
		}
	}
</style>